<script setup>
import { reactive, computed } from 'vue'

const author = reactive({
    name: 'John Doe',
    books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
    ]
})

// Vue 的计算属性会自动追踪响应式依赖。
// 它会检测到 publishedBooksMessage 依赖于 author.books，
// 所以当 author.books 改变时，任何依赖于 publishedBooksMessage 的绑定都会同时更新。

// 一个计算属性 ref
// 定义了一个计算属性 publishedBooksMessage
// computed()方法，返回值为一个计算属性 ref。
const publishedBooksMessage = computed(() => {
    return author.books.length > 0 ? 'Yes' : 'No'
})

</script>

<template>
    <p>Has published books:</p>
    <!-- publishedBooksMessage.value 访问计算结果。
    计算属性 ref 也会在模板中自动解包，
    因此在模板表达式中引用时无需添加 .value。 -->
    <span>{{ publishedBooksMessage }}</span>
</template>